<script setup lang="ts">
import {computed, onBeforeMount, ref, watch} from 'vue'
import {userConfigStore} from "@/store/user/userConfigStore";
import {getMyTaskList, taskClick} from "@/api/user/task";
import {ECode} from "@/util/commonUtil";
import {Empty, message} from 'ant-design-vue';
import {useSysEventStore} from "@/store/system/SysEventStore";
import {getCookie} from "@/util/cookieUtil";
import {cookieToken} from "@/config/CookieConfig";

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
onBeforeMount(() => {
  getMyTaskListMethod()
})

let isLogin = computed(() => userConfigStore().isLogin)

const splitList = ref<any>([])

// 监听任务完成事件,如何完成就刷新任务
watch(() => useSysEventStore().taskFinishMessage, () => {
  getMyTaskListMethod()
})
watch(isLogin, () => {
  isLogin = computed(() => userConfigStore().isLogin)
})

function getMyTaskListMethod() {
  let token = getCookie(cookieToken)
  if (!token){
    return
  }
  // 只展示任务相关的
  let params: any = {}
  params.marketName = "task"
  getMyTaskList(params).then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      splitArray(response.data, 3)
    }
  })
}

function splitArray(array: any[], size: number) {
  let data = [];
  for (let i = 0; i < array.length; i += size) {
    data.push(array.slice(i, i + size))
  }
  splitList.value = data
}

function click(task: any) {
  switch (task.button.action) {
    case "CLICK": {
      let params: any = {}
      params.id = task.uid
      params.key = "task"
      taskClick(params).then((response: any) => {
        if (response.code == ECode.SUCCESS) {
          getMyTaskListMethod()
          useSysEventStore().setTaskFinish(Math.random())
          message.success(response.message)
        }
      })
    }
      break
    default: {
      // 其它的动作，直接打开操作页
      let event = {
        "type": "task",
        "action": task.button.action,
        "message": task.button.message,
        "router": task.button.router,
        "time": new Date(),
      }
      useSysEventStore().setDomainEventMessage(event)
    }
  }
}
</script>

<template>
  <section class="userTask rounded-xl" v-if="isLogin">
    <a-card class="userTaskCard rounded-xl">
      <template #title>
        <span class="flex text-center w-full justify-center items-center">任务广场</span>
      </template>
      <a-carousel arrows autoplay v-if="splitList.length > 0" effect="fade">
        <template v-for="(taskList) in splitList">
          <section class="taskItem flex-col gap-4">
            <div class="taskItemInfo" v-for="task in taskList" :key="task.uid">
              <a-row>
                <a-col :span="16">
                  <div class="text-blue-500 line-clamp-1">{{ task.name }}</div>
                  <div class="text-gray-600 line-clamp-1">{{ task.description }}</div>
                </a-col>
                <a-col :span="8">
                  <a-button v-if="task.button && task.button.text && task.state == 'WAIT'" class="float-right mr-0.5"
                            @click="click(task)">
                    {{ task.button.text }}
                  </a-button>
                  <a-button v-else-if="task.state == 'WAIT'" class="float-right mr-0.5" type="text">
                    待完成
                  </a-button>
                  <a-button v-else-if="task.state == 'FINISH'" class="float-right mr-0.5 text-rose-500" type="text">
                    已完成
                  </a-button>
                </a-col>
              </a-row>
            </div>
            <a-divider></a-divider>
          </section>
        </template>
      </a-carousel>
      <div v-else>
        <a-empty :image="simpleImage"/>
      </div>
    </a-card>
  </section>
</template>

<style scoped lang="less">
.userTask{
  border: thin solid rgb(203 213 225);
}
.taskItem {
  display: flex !important;
}

:deep(.slick-dots) {
  position: relative;
  height: auto;
  bottom: -1rem;
}

:deep(.ant-carousel .slick-dots li button) {
  background: #9ca3af;
}

:deep(.ant-divider) {
  margin: 8px 0;
  background: #d1d5db;
}
</style>
